<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.set的使用</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <h1>学生信息</h1>
        <button @click="addSex">点我添加性别属性，默认值为男</button>
        <h2>学生姓名：{{student.name}}</h2>
        <h2 v-if="student.sex" >性别：{{student.sex}}</h2>
        <h2>学生年龄：真实年龄{{student.age.rAge}}, 对外年龄{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
          <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}} -- {{f.age}}
          </li>
        </ul>
      </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
          name: '南昌大学',
          address: '江西南昌',
          student:{
            name:'lc',
            age:{
              rAge: 32,
              sAge: 28
            },
            friends:[
              {name:'jack', age:28},
              {name:'curry', age:31}
            ]
          }
        },
        methods: {
          addSex(){
            // Vue.set(this.student, 'sex', '男')
            this.$set(this.student, 'sex', '男')
          }
        },
    })
</script>
</html>